<?php echo \think\facade\View::fetch("public/header"); ?>

<div class="cl-cantainer container">
    <div class="row">
        <div class="col-md-9 cl-left">
            <div class="cl-artical-content">
                <h2 class="cl-artical-title"><?php echo $article['article_title']; ?></h2>
                <div class="cl-card-tag">
                    <div><span>{{ commentListLength }}</span>人评论 / 发布时间：<span><?php echo date("Y-m-d H:i:s", $article['add_time']); ?></span>
                    </div>
                </div>
                <div class="cl-artical">
                    <?php echo $article['content']; ?>
                </div>
            </div>

            <div class="comment">
                <form class="cl-comment-from">
                    <input type="hidden" id="article_id" v-model="comment.article_id">
                    <div><textarea placeholder="说点什么吧..." rows="2" id="comment_content" v-model.lazy="comment.comment_content"></textarea></div>
                    <input type="text" placeholder="邮箱" id="email" v-model.lazy="comment.email"/>
                    <input type="text" placeholder="昵称" id="nickname" v-model.lazy="comment.nickname"/>
                    <button type="button" id="btn" @click="click()">留言</button>
                    <span class="clearfix"></span>
                </form>

                <h4 class="right-card-title" id="content">全部评论</h4>

                <div class="comment-panel" v-for="item in commentList">
                    <div class="comment-panel-portrait">
                        <img src="/img/portrait.png" class="img-fluid rounded-circle" alt="">
                    </div>
                    <div class="comment-panel-content">
                        <div class="comment-panel-content-item">
                            <div class="comment-author">{{ item.nickname}}</div>
                            <div>{{ item.add_time }}</div>
                        </div>
                        <div class="comment-panel-content-main">{{ item.comment_content}}</div>
                    </div>
                    <span class="clearfix"></span>
                    <div class="text-primary"></div>
                </div>
            </div>

        </div>

        <?php echo \think\facade\View::fetch("public/right"); ?>

    </div>
</div>
<?php echo \think\facade\View::fetch("public/footer"); ?>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let articleId = '<?php echo $article['article_id']?>';
    let app = new Vue({
        el:"#app",
        data:{
            comment:{comment_content:'',nickname:'',email:'',article_id: articleId},
            commentList:[]
        },
        created:function () {
            $.ajax({
                url:"/api/comment/list/",
                type:"GET",
                data:{
                    'article_id':articleId
                },
                beforeSend:function () {
                    console.log(111);
                },
                success:function (result) {
                    console.log(result);
                    if(result.status == 12){
                        app.commentList = result.data.commentData;
                    }else{
                        alert("获取评论列表失败，具体信息："+result.message)
                    }
                }
            })
        },
        methods:{
            click:function () {
                $.ajax({
                    url:"/api/comment/add/",
                    type: "POST",
                    data:app.comment,
                    beforeSend:function () {
                        console.log(111);
                    },
                    success:function (result) {
                        console.log(result);
                        if(result.status == 12){
                            app.commentList.unshift(result.data.result);
                        }else{
                            alert("添加评论列表失败，具体信息："+result.message)
                        }
                    }
                })
            }
        },
        watch:{
            'comment.comment_content':function (newValues) {
                if(newValues.length<2 || newValues.length>500){
                    alert("添加评论失败，评论内容2-500之间");
                }
            },
            'comment.email':function (newValues) {
                if(newValues.length < 3 || newValues.length > 100){
                    alert("添加评论失败，邮箱3-100之间");
                }
            },
            'comment.nickname':function (newValues) {
                if(newValues.length<1 || newValues.length>20){
                    alert("添加评论失败，昵称1-20之间");
                }
            }
        },
        computed:{
            commentListLength:function () {
                return this.commentList.length;
            }
        }
    })
</script>
